<script setup>
	import { computed } from '@vue/reactivity'
	import {
		ref,
		reactive,
		watchEffect,
		provide,
		inject,
		onMounted,
		nextTick,
	} from 'vue'
	import { useRouter } from 'vue-router'
	import { useStore } from 'vuex'
	import commonFunction from '../utils/commonFunction'

	// const logoUrl = ref(commonFunction.getHomePageImages('logo.jpg'))
	// const backgroundUrl = ref(commonFunction.getHomePageImages('background.jpg'))

	// console.log(commonFunction.getHomePageImages('logo.jpg'))

	onMounted(() => {})
	// @click="window.open(i.url, '_blank')"

	const store = useStore()
	const router = useRouter()

	const slideUp = ref(false)

	// 顶栏右侧列表
	const item = reactive([
		{
			title: 'Gitee文档',
			eng: 'SOURCE',
			url: 'https://gitee.com/DJXCK/free-rs',
		},
		{ title: '新手指引', eng: 'GUIDE', url: '/documentPage' },
		{
			title: '访问官网',
			eng: 'OFFICIAL',
			url: 'https://www.paddlepaddle.org.cn/',
		},
	])

	const toHome = () => {
		slideUp.value = true
		store.commit('pageStore/changeLoadingState', 0)
		setTimeout(() => {
			router.push('/changeDetection')
		}, 700)
	}

	const toUrl = (url) => {
		if (url.slice(0, 1) == '/') {
			router.push(url)
		} else {
			window.open(url, '_blank')
		}
	}
</script>

<template>
	<!-- 总体 -->
	<div :class="['index-div', slideUp == true ? 'slide-animation' : '']">
		<div class="top-bar">
			<div class="top-left">
				<div class="logo">
					<img src="../assets/images/homePage/logo.jpg" alt="" />
				</div>
			</div>
			<div class="top-right">
				<div v-for="i in item" @click="toUrl(i.url)" class="top-right-item">
					<div>
						{{ i.title }}
					</div>
					<div>
						{{ i.eng }}
					</div>
				</div>
			</div>
		</div>
		<div class="body-div">
			<div class="body-main">
				<div class="animate__animated animate__bounceInUp">FreeRS</div>
				<div class="animate__animated animate__bounceInLeft">
					遥感图像智能解译平台
				</div>
				<div class="animate__animated animate__bounceInLeft">
					全方位解锁空间地理信息
				</div>
				<div class="animate__animated animate__fadeInDown">
					变化检测 目标检测 目标提取 地物分类
				</div>
				<div class="to-home-div animate__animated animate__bounceInUp">
					<button @click="toHome" class="to-home-btn">开始使用</button>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="less">
	// 上滑动画
	.slide-animation {
		transform: translateY(-100%) !important;
	}
	.index-div {
		height: 100vh;
		width: 100vw;
		transform: translateY(0);
		display: flex;
		flex-direction: column;
		background: url('../assets/images/homePage/background.jpg') no-repeat;
		background-size: cover;
		transition: all 0.7s ease-out;

		.top-bar {
			height: 10%;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.top-left {
				height: 100%;
				width: 20%;
				.logo {
					padding-top: 25px;
					height: 100%;
					width: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					> img {
						margin-left: 40px;
						width: 100px;
						height: 100px;
						object-fit: cover;
					}
				}
			}
			.top-right {
				width: 30%;
				height: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-direction: row;
				.top-right-item {
					width: 33.3%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					cursor: pointer;

					transform: scale(1);
					transition: all 0.2s;
				}
				.top-right-item:hover {
					transform: scale(1.2);
					color: rgb(13, 64, 176);
				}
			}
		}
		.body-div {
			height: 90%;
			width: 100%;
			padding: 5% 10%;
			.body-main {
				height: 100%;
				> div:nth-child(1) {
					font-size: 10em;
					font-weight: bold;
				}
				> div:nth-child(2) {
					font-size: 7em;
					font-weight: 500;
				}
				> div:nth-child(3) {
					font-size: 6em;
					font-weight: 400;
				}
				> div:nth-child(4) {
					padding: 2% 0;
					font-size: 24px;
					font-weight: 400;
				}
				.to-home-div {
					padding-top: 2%;
					font-size: 30px;
					font-weight: 300;
					.to-home-btn {
						width: 150px;
						height: 60px;
						/* background-color: rgba(245, 207, 207, 0.4); */
						transition: color 0.15s ease-in-out,
							background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
						cursor: pointer;
						letter-spacing: 4px;
						font-size: 21px;
						border-radius: 4px;
						color: #fff;
						background-color: #359df1;
						border: 0px solid #359df1;
					}
					.to-home-btn:hover {
						background-color: rgb(101, 220, 233);
					}
				}
			}
		}
	}
</style>
